<template>
  <transition
    enter-active-class="animate__fadeIn"
    leave-active-class="animate__fadeOut"
  >
    <div v-if="loading" class="loading-bar animate__animated"></div>
  </transition>
  <el-config-provider :size="'small'" :z-index="2000">
    <RouterView />
  </el-config-provider>
</template>
<script>
  import { ElConfigProvider } from 'element-plus'
  import { mapActions } from 'vuex'
  export default {
    name: 'App',
    components: {
      ElConfigProvider,
    },
    data () {
      return {
        loading: false
      }
    },
    methods: mapActions('authority', { initUserInfo: 'updateStateByStorageAction' }),
    // 经过深思熟虑, 觉得应该将一些应用中初始化并且只执行一次的动作放在这里执行
    created () {
      this.initUserInfo()
    },
    mounted () {
      // 全局loading
      this.$bus.on('global:loading.update', (value) => {
        setTimeout(() => {
          this.loading = value
        }, !value ? 500 : 0)
      })
    }
  }
</script>
